<template>
  <div>
    <div>
      <!-- <el-form label-width="120px" size="mini">
        <el-row :gutter="20">
          <el-col :span="7">
            <el-form-item label="行动类型">
              <el-select
                v-model="searchData.actCode"
                placeholder="请输入"
                size="mini"
              >
                <el-option
                  v-for="item in options"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="searchData.createStartTime"
                type="datetime"
                placeholder="开始日期"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
              -<el-date-picker
                v-model="searchData.createEndTime"
                type="datetime"
                placeholder="结束日期"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form> -->
      <!-- <div
        style="display: flex; justify-content: flex-end; margin-bottom: 10px"
      >
        <el-button
          type="primary"
          size="mini"
          class="search-btn"
          @click="getList"
          >查询</el-button
        >
        <el-button type="primary" size="mini" class="search-btn" @click="resat"
          >重置</el-button
        >
      </div> -->
    </div>
    <div class="table-content">
      <el-table :data="tableData" tooltip-effect="dark">
        <el-table-column
          align="center"
          label="序号"
          type="index"
          :index="getRowIndex"
        ></el-table-column>
        <el-table-column
          prop="cardNumber"
          align="center" :formatter="hidInfo"
          label="卡号"
        ></el-table-column>
        <el-table-column
          prop="identificationNumber"
          align="center" :formatter="hidInfo"
          label="证件号码"
        ></el-table-column>
        <el-table-column
          prop="phoneNumber"
          align="center" :formatter="hidInfo"
          label="手机号"
        ></el-table-column>
        <el-table-column
          prop="talkBegin"
          align="center"
          label="电话开始时间"
        ></el-table-column>
        <el-table-column
          prop="talkEnd"
          align="center"
          label="电话结束时间"
        ></el-table-column>
        <el-table-column
          prop="talkTime"
          align="center"
          label="通话时间"
        ></el-table-column>
        <el-table-column
          prop="callResult"
          align="center"
          label="联系结果"
        ></el-table-column>
        <el-table-column
          prop="userName"
          align="center"
          label="客服组名称"
        ></el-table-column>
        <el-table-column
          prop="roleName"
          align="center"
          label="客服姓名"
        ></el-table-column>
        <el-table-column
          prop="callRemarks"
          align="center"
          label="联系备注"
        ></el-table-column>
      </el-table>

      <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="tableQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination> -->
    </div>
  </div>
</template>

<script>
import { cmcUrl } from '../../../../../../static/baseUrl'
// import {obj2Query} from "@/utils"
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: "80%",
    },
    row: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      searchData: {
        createStartTime: "",
        createEndTime: "",
        actCode: "",
      },
      tableData: [
        {
          phoneNum: "13243360218",
          customerName: "牛1",
          inspector: "夏文龙",
        },
        {
          phoneNum: "13243360218",
          customerName: "牛2",
          inspector: "高淙博",
        },
      ],
      // 页码初始化数据
      total: 0, //总条目数
      tableQuery: {
        size: 10, //每页现实的条数
        page: 1, //当前显示那页
      },

      options: [],
    };
  },

  methods: {
    //获取序号
    getRowIndex(index) {
      index = index + 1 + (this.tableQuery.page - 1) * this.tableQuery.size;
      return index;
    },
    //页码显示条目变化
    handleSizeChange(val) {
      this.tableQuery.size = val;
      this.tableQuery.page = 1;
      this.getList();
    },
    // 页码跳转
    handleCurrentChange(val) {
      this.tableQuery.page = val;
      this.getList();
    },
    getList() {
      // console.log(this.row)
      let data = {
        size: this.tableQuery.size,
        page: this.tableQuery.page - 1,
        identificationNumber: this.row.identificationNumber,
        batchNumber: this.row.batchNumber,
        cardNumber: this.row.cardNumber,
       // status: this.row.status,
        // queryFlag: this.row.queryFlag,
       // putoutNo: this.row.putoutNo,
        //...this.searchData,
      };
      this.$axios({
        method: "post",
        url: `/CMC/api/tbCall/history/selectHistory`,
        params: data,
      }).then((res) => {
        //debugger;
           console.log("dddddd"+res)
            this.tableData = res.data.list;
         // this.tableData = res.data.getList || [];
         // this.total = res.data.totalElements || 0;
          // for (let key = 0; key <= res.data.content.length; key++) {
          //   // this.tableData[key].actCode = res.data.content[key].actCode == "SM" ? "短信" : (res.data.content[key].actCode == "AI" ? "机器人" : (res.data.content[key].actCode == "VS" ? "外访" : "语音"))
          //   this.tableData[key].createTime = parseTime(
          //     res.data.content[key].createTime,
          //     "{y}-{m}-{d} {h}:{i}:{s}"
          //   );
          //   this.tableData[key].payBackDara = parseTime(
          //     res.data.content[key].payBackDara,
          //     "{y}-{m}-{d}"
          //   );
          //   if (res.data.content[key].checkResult == 9) {
          //     this.tableData[key].checkResult = "已存入欠款";
          //   }
          //   if (res.data.content[key].checkResult == 1) {
          //     this.tableData[key].checkResult = "信息变更";
          //   }
          //   if (res.data.content[key].checkResult == 2) {
          //     this.tableData[key].checkResult = "客户诉求";
          //   }
          //   if (res.data.content[key].checkResult == 3) {
          //     this.tableData[key].checkResult = "失联";
          //   }
          //   if (res.data.content[key].checkResult == 4) {
          //     this.tableData[key].checkResult = "风险预警";
          //   }
          //   if (res.data.content[key].checkResult == 5) {
          //     this.tableData[key].checkResult = "其他";
          //   }
          //   if (res.data.content[key].checkResult == 6) {
          //     this.tableData[key].checkResult = "约定联系";
          //   }
          //   if (res.data.content[key].checkResult == 7) {
          //     this.tableData[key].checkResult = "客户投诉";
          //   }
          //   if (res.data.content[key].checkResult == 10) {
          //     this.tableData[key].checkResult = "客户遗忘还款";
          //   }
          //   if (res.data.content[key].checkResult == 11) {
          //     this.tableData[key].checkResult = "承诺还款";
          //   }
          // }
        });
    },
    // 导出需要调用方法
    doenloadFile(content, fileName) {
      const link = document.createElement("a");
      link.href = content;
      link.download = fileName;
      link.click();
    },
    exportList() {
      this.$confirm("确认要导出吗?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      }).then(() => {
        //  let data = obj2Query(this.row);
        // this.$axios.get(`/CC/taskCenter/caseInfo/exportByCondition?${data}`).then( res => {
        //   console.log(res)
        // });
        let data = {
          putoutNo: this.row.putoutNo,
          ...this.searchData,
        };
        this.$axios
          .get(`/CC/taskCenter/caseInfo/exportByCondition`, {
            params: data,
            responseType: "blob",
          })
          .then((res) => {
            let bolb = new Blob([res], {
              type: "application/vnd.ms-excel;charset=utf-8",
            });
            let objectUrl = URL.createObjectURL(bolb);
            this.doenloadFile(objectUrl, "行动记录导出");
          });
      });
    },
    resat() {
      this.searchData = {
        createStartTime: "",
        createEndTime: "",
        actCode: "",
      };
    },
    queryDicEnumByType() {
      this.$axios
        .get(`/MC/dicenum/queryDicEnumByType?type=operation_type`)
        .then((res) => {
          this.options = res.data;
        });
    },
  },
  created() {
     this.getList();
    // this.queryDicEnumByType()
  },
};
</script>

<style lang="scss" scoped>
.case-detail {
  padding: 10px 20px;
  background-color: #ffffff;
  border-radius: 10px;
}
::v-deep .el-tabs__active-bar {
  display: none;
}
::v-deep .el-tabs__item {
  height: auto;
}
::v-deep .el-tabs__item.is-active {
  color: #ffffff;
  background-color: #d10a14;
  padding: 0px;
  line-height: 30px;
  border-radius: 15px;
}
</style>
